<template>
  <div>
    <c2c-trade :title="$t('出售') + ' ' + $store.state.c2c.symbol" :detail="data" v-if="data.id">
      <template #trade>
        <div class="buy-item mt-40 w-full mainBackground c2cColor">
          <div class="buy-item-title flex justify-between font-28 py-34 border-b-1 border-light-grey">
            <div class="flex-1 text-center" :class="{ 'text-grey': genre === 'num' }" @click="typeSwitch('amount')">
              {{ $t("按金额出售") }}
            </div>
            <div class="flex-1 text-center" :class="{ 'text-grey': genre === 'amount' }" @click="typeSwitch('num')">
              {{ $t("按数量出售") }}
            </div>
          </div>
          <div class="px-32 mt-40">
            <div class="w-full buy-item-input relative box-border" v-show="genre === 'amount'">
              <span class="font-28 absolute left-28 text font-700">{{
                currencySymbol
              }}</span>
              <input class="w-full font-36 h-110 border-none box-border pl-96" type="text"
                :placeholder="`${data.investment_min} - ${data.investment_max}`" v-model="money" @input="changeVal" />
              <span class="font-28 absolute right-19 text" style="color: #1a6ebd" @click="all">{{ $t("全部") }}</span>
            </div>
            <div class="w-full mb-40 buy-item-input relative box-border" v-show="genre === 'num'">
              <input class="w-full font-36 h-110 border-none box-border pl-30 font-400" type="number"
                :placeholder="$t('请输入数量')" v-model="quantity" @input="changeValNum" />
              <span class="font-28 absolute right-19 text">
                <span class="mr-16" style="color: #b8bcc5">{{ $store.state.c2c.symbol }}</span>

                <span style="color: #1a6ebd" @click="all">{{
                  $t("全部")
                }}</span>
              </span>
            </div>
            <div v-if="tips" class="flex mt-12 text-red font-28">
              {{ tips }}
            </div>
            <div v-show="genre === 'amount'" class="mt-18 font-20 text-grey">
              {{ $t('可用余额') }} {{ Math.floor(usableVolume * 1000000) / 1000000 }} {{ $store.state.c2c.symbol }} ≈ {{
                (Math.floor(usableVolume * 100000) / 100000 * data.symbol_value / 1).toFixed(2) }}
              {{ currencySymbol }}
            </div>
            <div
              class="flex justify-between items-center w-full py-20 my-36 pl-30 pr-36 box-border rounded-md tabBackground"
              @click="toc2cCollection">
              <div>
                <span v-if="!reciveInfo.id" class="font-32" style="color: #b8bcc5">{{ $t("选择收款方式") }}</span>
                <div v-else class="flex items-center font-30 c2cColor">
                  <div class="w-8 h-32 rounded-full" style="background: #e7bb41"></div>
                  <span class="mx-20">{{ reciveInfo.methodName }}</span>
                  <span>{{ fullBankCarNumber }}</span>
                </div>
              </div>
              <van-icon class="font-700" color="#B8BCC5" name="arrow" />
            </div>
            <div class="flex justify-between mb-12">
              <span class="text-grey">{{ $t("数量") }}</span>
              <span>{{ totalQuantity }}
                {{ data.symbol && data.symbol.toUpperCase() }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-grey">{{ $t("总额") }}</span>
              <span>{{ totalMoney }} {{ currencySymbol }}</span>
            </div>
            <div class="w-full mt-24 pb-30">
              <van-button color="#E35461" @click.native="SellClick" class="w-full font-30 buy-button" :disabled="loading"
                type="primary">
                <span v-if="!loading">{{ $t("出售") }}&nbsp;{{ data.symbol && data.symbol.toUpperCase() }}</span>
                <van-loading v-else type="spinner" />
              </van-button>
            </div>
          </div>
        </div>
      </template>
      <template #desc>
        <div class="mt-36">
          <h2 class="font-28 font-400 c2cColor">{{ $t("交易条款") }}</h2>
          <div class="mt-30 font-26 text-grey">
            <p v-html="data.transaction_terms"></p>
          </div>
        </div>
      </template>
    </c2c-trade>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import otcApi from "@/API/otc";

import { Icon, Toast } from "vant";
import C2cTrade from "@/page/c2c-trade/components/C2cTrade";
import { _getBalance } from "@/API/trade.api";
import { formatTime } from "@/utils/utis";
import { _getAllWallet } from "@/API/fund.api";

// keep-alive
export default {
  name: "c2cSell",
  props: ["type"],
  data() {
    return {
      id: "", // 广告id
      genre: "amount", // 按金额/数量购买
      amount: "", // 金额
      num: "", // 数量
      session_token: "",
      usableVolume: "",
      data: {},
      passwd: "", // 资金密码
      tips: '',
      money: '',
      quantity: '',
      totalMoney: '-',
      totalQuantity: '-',
      loading: false,
      // orderInfo: {
      //   unitPrice: "", // 单价
      //   count: "", // 数量
      //   totalPrice: "", // 总价
      //   orderNumber: "", // 订单号
      //   orderCreateTime: "", // 创建时间
      //   paymentMethodId: "", // 支付方式id
      //   methodName: "", // 支付名称
      //   bankNumber: "", // 银行卡号
      //   realName: "", // 卖家姓名
      //   bankName: "", // 银行名
      //   expire_time: "", // 支付时效

      // },
      reciveInfo: {},
    };
  },
  created() {
    // this.id = this.$route.query.id
    this.id = this.$store.state.c2c.adv_id;
    let { reciveType } = this.$route.query; // 支付方式
    if (reciveType) {
      reciveType = JSON.parse(reciveType);
      this.reciveInfo = reciveType;
      console.log("reciveType", reciveType);
      this.data = JSON.parse(this.$route.query.data)
      if (this.$route.query.type == 'amount') {
        this.money = this.$route.query.total
        this.totalMoney = this.money * 1
        if (this.symbol !== "USDT") {
          console.log(this.data.symbol_value)
          this.totalQuantity = Math.floor((this.totalMoney / this.data.symbol_value) * 1000000) / 1000000
        } else {
          this.totalQuantity = Math.floor((this.totalMoney / this.data.symbol_value) * 100) / 100;
        }
      } else {
        this.quantity = this.$route.query.total * 1
        this.totalQuantity = this.quantity
        if (this.symbol !== "USDT") {
          console.log(this.quantity)
          console.log(this.data.symbol_value)
          this.totalMoney = (this.quantity * this.data.symbol_value).toFixed(6)
        } else {
          this.totalMoney = (this.quantity * this.data.symbol_value).toFixed(2)
        }
      }
      this.genre = this.$route.query.type
    }
    this.initData();
    // 获取余额
    _getAllWallet().then((res) => {
      let walletList = res.extends;
      let initObj = walletList.find(item => {
        return item.symbol.toLowerCase() == this.$store.state.c2c.symbol.toLowerCase()
      })
      this.usableVolume = initObj.usable
    });
  },
  mounted() {
    this.$bus.$on("returnPwd", (pwd) => {
      this.passwd = pwd;
    });
    // 设置关于订单的信息
  },
  beforeDestroy() {
    this.$bus.$off("returnPwd");
  },
  methods: {
    toc2cCollection() {
      let total = ''
      if (this.genre == 'amount') {
        total = this.money
      } else {
        total = this.quantity
      }
      this.$router.replace({ path: '/c2cCollection', query: { id: this.data.id, type: this.genre, total, data: JSON.stringify(this.data) } })
    },
    initData() {
      otcApi.ctcAdvertGetDetail({ id: this.id, language: this.$i18n.locale }).then((res) => {
        this.data = res.data;
      });
    },
    // 切换类型
    typeSwitch(type) {
      this.genre = type;
      this.tips = ''
      this.money = ''
      this.quantity = ''
      this.totalMoney = '-'
      this.totalQuantity = '-'
    },
    changeVal(e) {
      // e.target.value = e.target.value.replace('-', ''); 不能输入小数了
      //this[this.type] = e.target.value;
      if (this.money == '') {
        this.tips = ''
        this.totalMoney = '-'
        this.totalQuantity = '-'
      } else {
        if (this.money * 1 < this.data.investment_min * 1) {
          this.tips = this.$t('最小金额') + this.data.investment_min + ' ' + this.exchangeCurrency
          this.totalMoney = '-'
          this.totalQuantity = '-'
        } else if (this.money * 1 > this.data.investment_max * 1) {
          this.tips = this.$t('最大金额') + this.data.investment_max + ' ' + this.exchangeCurrency
          this.totalMoney = '-'
          this.totalQuantity = '-'
        } else {
          this.tips = ''
          this.totalMoney = this.money
          if (this.symbol !== "USDT") {
            this.totalQuantity = Math.floor((this.totalMoney / this.data.symbol_value) * 1000000) / 1000000
          } else {
            this.totalQuantity = Math.floor((this.totalMoney / this.data.symbol_value) * 100) / 100;
          }
        }
      }
    },
    changeValNum() {
      if (this.quantity == '') {
        this.tips = ''
        this.totalMoney = '-'
        this.totalQuantity = '-'
      } else {
        let minNum = Math.floor((this.data.investment_min / this.data.symbol_value) * 1000000) / 1000000;
        let maxNum = Math.floor((this.data.investment_max / this.data.symbol_value) * 1000000) / 1000000;
        if (this.quantity * 1 < minNum * 1) {
          this.tips = this.$t('最小数量') + minNum + ' '
          this.totalMoney = '-'
          this.totalQuantity = '-'
        } else if (this.quantity * 1 > maxNum * 1) {
          this.tips = this.$t('最大数量') + maxNum + ' '
          this.totalMoney = '-'
          this.totalQuantity = '-'
        } else {
          this.tips = ''
          this.totalQuantity = this.quantity
          if (this.symbol !== "USDT") {
            this.totalMoney = (this.quantity * this.data.symbol_value).toFixed(6)
          } else {
            this.totalMoney = (this.quantity * this.data.symbol_value).toFixed(2)
          }
        }
      }
    },
    // 购买
    async SellClick() {
      if (!this.reciveInfo.id) {
        Toast(this.$t('请选择收款方式'));
        return;
      }
      // const index = this.data.pay_type_name.split(',').findIndex(item => item === this.reciveInfo.methodName)
      console.log(this.exchangeCurrency)
      this.loading = true
      let res = await otcApi.getSessionToken({
        currency: this.exchangeCurrency
      });
      this.session_token = res.data.session_token;
      const params = {
        session_token: this.session_token, // session_token
        c2c_advert_id: this.data.id,
        payment_method_id: this.reciveInfo.id, //this.data.pay_type.split(',')[index]
        direction: "sell",
        order_type: this.genre === "amount" ? "by_amount" : "by_num", // 'by_num'
        amount: this.genre === "amount" ? this.totalMoney / 1 : "", // 金额
        coin_amount: this.genre === "amount" ? "" : this.totalQuantity / 1, // 数量
        remark: this.data.remark,
      };

      // 获取订单号
      otcApi.ctcOrderOpen(params).then((res) => {
        this.loading = false
        this.$store.commit("c2c/SET_ORDER_NO", res.data.order_no);
        this.$router.push({ path: "/sellGenerate" });
      }).catch(err => {
        this.loading = false
      })
    },
    // 全部点击
    all() {
      this.tips = ''
      let usableMoney = (Math.floor(this.usableVolume * 100000) / 100000 * this.data.symbol_value / 1).toFixed(2)
      if (usableMoney * 1 <= this.data.investment_max) {
        this.money = usableMoney
        this.totalMoney = usableMoney
        if (this.symbol !== "USDT") {
          this.quantity = Math.floor((usableMoney / this.data.symbol_value) * 1000000) / 1000000
          this.totalQuantity = Math.floor((usableMoney / this.data.symbol_value) * 1000000) / 1000000
        } else {
          this.quantity = Math.floor((usableMoney / this.data.symbol_value) * 100) / 100
          this.totalQuantity = Math.floor((usableMoney / this.data.symbol_value) * 100) / 100
        }
      } else {
        this.money = this.data.investment_max
        this.totalMoney = this.data.investment_max
        if (this.symbol !== "USDT") {
          this.quantity = Math.floor((this.data.investment_max / this.data.symbol_value) * 1000000) / 1000000
          this.totalQuantity = Math.floor((this.data.investment_max / this.data.symbol_value) * 1000000) / 1000000
        } else {
          this.quantity = Math.floor((this.data.investment_max / this.data.symbol_value) * 100) / 100
          this.totalQuantity = Math.floor((this.data.investment_max / this.data.symbol_value) * 100) / 100
        }
      }
    },
  },
  watch: {
    // paymentMethod() {
    //   if (Object.prototype.toString.call(this.paymentMethod) === '[object Object]') {
    //     console.log(this.paymentMethod)
    //     this.orderInfo.paymentMethodId = this.paymentMethod.id;
    //     this.orderInfo.methodName = this.paymentMethod.methodName;
    //     this.orderInfo.bankNumber = this.paymentMethod.paramValue1;
    //     this.orderInfo.realName = this.paymentMethod.realName;
    //     this.orderInfo.bankName = this.paymentMethod.paramName1;
    //   }
    // }
  },
  computed: {
    ...mapState("home", ["currency"]),
    ...mapGetters("c2c", ["symbol", "currencySymbol", "exchangeCurrency"]),
    fullMethodName() {
      if (this.paymentMethod) {
        return this.paymentMethod.methodName;
      } else {
        return "";
      }
    },
    fullBankCarNumber() {
      if (!this.reciveInfo.id) return;
      return this.reciveInfo.paramValue1.replace(
        /^([0-9]{4})[0-9]*([0-9]{4})$/,
        "$1******$2"
      );
    },
  },
  components: {
    [Icon.name]: Icon,
    C2cTrade,
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/mixin.scss";


::v-deep .van-button {
  border-radius: 10px;
  background: #2EBD85;
}

.buy-item {
  border-radius: 25px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.border-ra {
  border-radius: 10px;
}

.buy-item-title {
  position: relative;

  &:after {
    @include border-1px("bottom");
  }
}

.buy-item-input {
  input {
    border-radius: 10px;

    @include themify() {
      background: themed("input_background");
    }
  }

  .text {
    top: 50%;
    transform: translateY(-50%);
  }
}

.border-bottom-1px {
  position: relative;

  &:after {
    @include border-1px("bottom");
  }
}

.tips {
  border-radius: 8px;
}
</style>
